import React from 'react';
import { Layout,message } from 'antd';
import { Form, Input, Button } from 'antd';
import "./Login.css"
import {inject,observer} from "mobx-react";
import {Link} from "react-router-dom";
import Axios from "./../util/axios"
function Reg(props) {
    const { Header, Footer, Content } = Layout;
    //跳转到主页面
    const onFinish = (values) => {
        console.log(values)
        if(values.password===values.password1){
            Axios.post('/Reg',values).then((res)=>{
                if(res.data.code===200){
                    message.success('注册成功');
                    props.history.push('/login')
                }else {
                    console.log(res)
                }
            })

        }else {
            message.error('两次密码对不上');
            console.log("两次密码对不上")
        }

    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <div>
            <Layout className="login">
                <Header className={"header"}>
                    <h1>后台管理系统</h1>
                </Header>
                <Content className={"content"}>
                    <div className={"frmLogin"}>
                        <h2>注册</h2>
                        <Form
                            name="basic"
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名!',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码!',
                                    },
                                ]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item
                                label="再次输入密码"
                                name="password1"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码!',
                                    },
                                ]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item
                                wrapperCol={{
                                    offset: 8,
                                    span: 16,
                                }}
                            >
                                <Button className={"Loginbut"} type="primary" htmlType="submit">
                                    完成
                                </Button>
                                <Button  type="primary" ><Link to={"/login"}>返回</Link></Button>
                            </Form.Item>
                        </Form>
                    </div>
                </Content>
                <Footer className={"footer"}>
                    <p>
                        copyright 2021.6
                    </p>
                </Footer>
            </Layout>
        </div>
    );

}

export default inject('user')(observer(Reg));